<template>
  <div>
    <van-swipe @change="onChange" autoplay="2000" >
      <van-swipe-item v-for="(v,index) in list" :key="index" class="swi">
        <img :src="v.src" alt="">
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/7</div>
      </template>
    </van-swipe>

    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
     <van-swipe-item class="kuang" v-for="(v,index) in list" :key="index">
        <img :src="v.src" alt="">
    </van-swipe-item>
 
    </van-swipe> -->
  

  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      list:[]
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
  created(){
    this.$http({
        url:"http://localhost:3000/swiper",
        method:"get"
    }).then((res)=>{
        this.list=res.data;
        // console.log(this.list);
    })
  }
  
}
</script>

<style lang="scss" scoped>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: .625rem;
    color: white;
    width: 1.5rem;
    height: .8rem;
    text-align: center;
  }
  img{
    width: 18.75rem;
    height: 18.75rem;
  }
  .swi{
    text-align: center;
  }
</style>